<template>
    <div class="author-page" ref="top" v-if="authorList">
        <div class="header">
            <div  @click="goback" class="left">
                <img src="../assets/images/back_b_icon.png" alt="">
            </div>
            <div class="right">
                <div class="msg">
                    <img src="../assets/images/home_message.png" alt="">
                    <span class="n">私信</span>
                </div>
                <div class="gz" @click="addfollow(authorList.id)" v-if="!isfollow">
                    <img src="../assets/images/personal_gz.png" alt="">
                    <span class="n">关注</span>
                </div>
                <div class="gz isfollow" @click="addfollow(authorList.id)" v-if="isfollow">
                    <!-- <img src="../assets/images/personal_gz.png" alt=""> -->
                    <span class="n">已关注</span>
                </div>
            </div>
        </div>
        <div class="author-info" v-if="authorList">
           <div class="main-info">
             <div class="info-left">
                <h4 class="author-name">{{authorList.title}}</h4>
                <div class="Speciality" v-if="authorList.specialities.length">专长&nbsp;&nbsp;:&nbsp;&nbsp;<span v-for="(item,index) in authorList.specialities" :key="index">{{item}} </span></div>
                <div class="Speciality" v-else>请添加您的专长</div>
            </div>
            <div class="info-right">
                <div class="gz-num" @click="showFans('follows')">
                    <h4 class="num">{{authorList.followsCount}}</h4>
                    <h4 class="title">关注</h4>
                </div>
                <div class="line"></div>
                <div class="fz-num" @click="showFans('fans')">
                    <h4 class="num">{{authorList.fansCount}}</h4>
                    <h4 class="title">粉丝</h4>
                </div>
            </div>
           </div>
        <div class="other-info">
            <div class="txt">{{authorList.profile}}</div>
            <div class="author-lists">
                <div class="sex">
                    <img v-if="authorList.sex=='0'" src="../assets/images/性别女.png" alt="">
                    <img v-if="authorList.sex!='0'" src="../assets/images/性别男.png" alt="">
                </div>
                <div class="level">
                    Lv.{{authorList.level}}
                </div>
                <div class="vip">
                    <img v-if="!authorList.isMember" src="../assets/images/me_vip_icon_gray.png" alt="">
                    <img v-if="authorList.isMember" src="../assets/images/me_vip_icon_yellow.png" alt="">
                </div>
            </div>
        </div>
        </div>
        <van-sticky :offset-top="20" @change="showImg=!showImg">
        <div class="content">
            <div class="bg"></div>
            <div class="info-lists" >
            <div class="author-img" v-if="showImg">
                <img v-if="authorList" :src="'https://pic.ecook.cn/web/'+ authorList.imageid+'.jpg!s1'" alt="">
            </div>
            <ul class="list">
                    <li :class="['item',{'active':item.id==navId}]" v-for="item in navList" :key="item.id" @click="selected(item.id)">
                        <h4>{{item.num}}</h4>
                        <h4>{{item.title}}</h4>
                    </li>
            </ul>
            <div class="checked-box" v-if="navId==2" >
                <div :class="['box1', {'activebox':checked=='001'}]" @click="checkedTurn('001')">图文 · {{authorList.recipeCount}}篇</div>
                <div :class="['box1', {'activebox':checked=='002'}]" @click="checkedTurn('002')">视频 · {{videoCount}}篇</div>
            </div>

            <div class="lists-search" v-if="navId==2">
                <div class="main-search">
                    <img src="../assets/images/ic_search.png" alt="">
                    <input type="text" placeholder="输入关键字搜素创建的菜谱" @click="search" v-model="keyword">
                </div>
            </div>
            </div>
        </div>
        </van-sticky>
        <div class="loading" v-if="loading">
            <div class="loadingImg">
                <img src="../assets/images/loading_ecook.png" alt="">
            </div>
        </div>
        <!-- 菜谱视图 -->
        <d-recipe-list v-if="caipuFlag" :flag="flag" :caipu-list="caipuList" :checked="checked"></d-recipe-list>
        <!-- 专辑视图 -->
        <album-list v-if="albumFlag" :album-list="albumList"></album-list>
        <!-- 食话视图 -->
        <simple-talk-list v-if="SimpleTalkFlag" :simple-talk-list="simpleTalkList"></simple-talk-list>
        <!-- 故事视图 -->
        <article-list v-if="articleFlag" :article-list="articleList"></article-list>
        <van-empty class="empty" v-if="emptyFlag"  description="目前没有内容" />
        <author-fans v-if="!showFansFlag" @back="back" @showauthor="showauthor" :fans-orfollows="fansOrfollows"  :fans-num="fansNum"></author-fans>
    </div>
</template>

<script>
import DRecipeList from '../components/DRecipeList.vue'
import AlbumList from '../components/AlbumList.vue'
import SimpleTalkList from '../components/SimpleTalkList.vue'
import AuthorFans from '../components/AuthorFans.vue'
import ArticleList from '../components/ArticleList.vue'
import {getUserPageData,getRecipeListData,getVideoRecipeListData,getAlbumListData,getSimpleTalkListData,getArticleListData} from '../api/userInfo'
    export default {
        data() {
            return {
                navList:[
                    {
                        id:1,
                        num:0,
                        title:'课程',
                    },
                    {
                        id:2,
                        num:10,
                        title:'菜谱',
                    },
                    {
                        id:3,
                        num:0,
                        title:'食话',
                    },
                    {
                        id:4,
                        num:0,
                        title:'专辑',
                    },
                    {
                        id:5,
                        num:0,
                        title:'故事',
                    },
                ],//导航栏数据
                showImg: true,
                authorList:null,//作者信息
                authorId:null,//作者ID
                caipuList:null,//菜谱列表
                courseList:null,//课程列表
                simpleTalkList:null,//食话列表
                albumList:null,//专辑列表
                articleList:null,//故事列表
                navId:2,//初始化导航栏ID
                checked:'001',
                keyword:'',
                keyTime:null,
                RecipeListTotal:0,//图文菜谱总数 设置为0默认获取全部
                videoCount:0,//视频菜谱数量
                caipuFlag:false,//显示菜谱
                albumFlag:false,//显示专辑
                SimpleTalkFlag:false,//显示食话
                articleFlag:false,//显示故事
                TabNum:null,
                flag:true,
                showFansFlag:true,
                emptyFlag:true,
                fansOrfollows:null,
                fansNum:null,//关注总数
                loading:true,
                isfollow:false,//是否关注
                follows:[],//关注列表
            };
        },
        methods: {
            //作者详情
            getAuthorData(id){
                getUserPageData(id).then(data=>{
                    console.log(data);
                    if (data.data) {
                        setTimeout(() => {
                            this.loading = false
                        }, 400);
                    }else{
                        setTimeout(() => {
                            this.$router.go(-1)
                        }, 400);
                    }
                    this.authorList = data.data
                    this.navList.forEach(item=>{
                        if (item.id==1) {
                            item.num=data.data.onlineTeachCount>999?999:data.data.onlineTeachCount

                        }else if(item.id==2){
                            item.num=data.data.recipeCount>999?999:data.data.recipeCount
                            
                        }else if(item.id==3){
                            item.num=data.data.talkCount>999?999:data.data.talkCount
                            
                        }else if(item.id==4){
                            item.num=data.data.collectionSortCount>999?999:data.data.collectionSortCount
                            
                        }else if(item.id==5){
                            item.num=data.data.articleCount>999?999:data.data.articleCount
                            
                        }
                    })
                    let index = this.navList.findIndex(item=>item.id==this.navId)
                    this.TabNum = Number(this.navList[index].num)
                    if (this.TabNum!=0) {
                        this.emptyFlag = false
                    }else{
                        this.emptyFlag = true
                    }
                    //重置关注
                    let tempfollows = JSON.parse(window.localStorage.getItem("follows"))
                    if (tempfollows) {
                        this.follows = tempfollows
                        let i = tempfollows.findIndex(item=>item.id==this.authorList.id)
                        if (i!=-1) {
                            this.isfollow = true
                        }
                    }
                })
                //视频菜谱总数
                getVideoRecipeListData({userId:id,page:1,size:this.RecipeListTotal}).then(data=>{
                  this.videoCount = data.data.total
                  this.TabNum = data.data.total
                })
            },
            //图文菜谱
            getRecipeListFun(id,page,size){
                getRecipeListData({userId:id,page,size}).then(data=>{
                  console.log(data);
                  if (data.data.total!=0) {
                    this.caipuFlag = true
                    this.albumFlag = false
                    this.SimpleTalkFlag = false
                    this.articleFlag = false
                    this.caipuList = data.data.list
                    this.TabNum = data.data.total
                    if (this.TabNum!=0) {
                        this.emptyFlag = false
                    }
                  }
                })
            },
            //视频菜谱
            getVideoRecipeListFun(id,page,size){
                getVideoRecipeListData({userId:id,page,size}).then(data=>{
                  console.log(data);
                  if (data.data.total!=0) {
                    this.caipuFlag = true
                    this.albumFlag = false
                    this.SimpleTalkFlag = false
                    this.articleFlag = false
                    this.caipuList = data.data.list
                    this.TabNum = data.data.total
                    if (this.TabNum!=0) {
                        this.emptyFlag = false
                    }
                  }
                })
            },
            //专辑列表
            getAlbumListFun(id,page,size){
                getAlbumListData({userId:id,page,size}).then(data=>{
                    console.log(data);
                    if (data.data) {
                        this.albumFlag = true
                        this.caipuFlag = false
                        this.SimpleTalkFlag = false
                        this.articleFlag = false
                        this.albumList = data.data
                    }
                })
            },
            //食话列表
            getSimpleTalkListFun(id){
                getSimpleTalkListData({userid:id}).then(data=>{
                    console.log(data);
                    if (data.list.length) {
                        this.SimpleTalkFlag = true
                        this.caipuFlag = false
                        this.albumFlag = false
                        this.articleFlag = false
                        let templist =data.list
                        templist.forEach(item=>{
                            if (item.imageids.length>9) {
                                item.imageids = item.imageids.split(",")[0]
                            }
                        })
                        this.simpleTalkList = templist
                    }
                })
            },
            //故事列表
            getArticleListFun(id){
                getArticleListData({userid:id}).then(data=>{
                    console.log(data);
                    if (data.list.length) {
                        this.articleFlag = true
                        this.caipuFlag = false
                        this.albumFlag = false
                        this.SimpleTalkFlag = false
                        let templist =data.list
                        templist.forEach(item=>{
                            if (item.imageids.length>9) {
                                item.imageids = item.imageids.split(",")[0]
                            }
                        })
                        this.articleList = templist
                    }
                })
            },
            //课程、菜谱、食话、专辑、故事
            selected(id){
                this.navId = id
                window.localStorage.setItem("TabIndex",id)
                let index = this.navList.findIndex(item=>item.id==id)
                this.TabNum = this.navList[index].num
                if (this.TabNum!=0) {
                    this.emptyFlag = false
                }else{
                    this.emptyFlag = true
                }
                this.caipuFlag = false
                this.albumFlag = false
                this.SimpleTalkFlag = false
                this.articleFlag = false
                this.getTabData(id,this.$route.query.id)
            },
            //菜谱图文、视频切换
            checkedTurn(value){
                this.checked=value
                this.caipuFlag = false
                this.caipuList = null
                // this.TabNum = 0
                if (value == '001') {
                    this.getRecipeListFun(this.$route.query.id,1,this.RecipeListTotal)
                }else if(value == '002'){
                    this.getVideoRecipeListFun(this.$route.query.id,1,this.RecipeListTotal)
                }
            },
            search(){
                // console.log(this.$refs.top.scrollTop);
                this.$refs.top.scrollTop = 238.39999389648438     
            },
            //Tab切换数据
            getTabData(navID,id){
                if (navID == 2) {
                    this.caipuList = null
                    if (this.checked == '001') {
                        this.getRecipeListFun(id,1,this.RecipeListTotal)
                    }else if(this.checked == '002'){
                        this.getVideoRecipeListFun(id,1,this.RecipeListTotal)
                    }
                }
                if(navID == 4){
                    this.albumList = null
                    this.getAlbumListFun(id,1,10)
                }
                if (navID == 3) {
                    this.getSimpleTalkListFun(id)
                }
                if (navID == 5) {
                    this.articleList = null
                    this.getArticleListFun(id)
                }
            },
            //显示关注、粉丝组件
            showFans(value){
                // console.log(value);
                this.fansNum = this.authorList.followsCount
                this.showFansFlag = false
                this.fansOrfollows = value
            },
            back(value){
                this.showFansFlag = value
            },
            goback(){
                this.$router.go(-1)
                this.authorId = this.$route.query.id
                
            },
            showauthor(id){
                this.loading = true
                this.caipuFlag = false
                this.albumFlag = false
                this.SimpleTalkFlag = false
                this.articleFlag = false
                this.showFansFlag = true
                this.getAuthorData(id)
                this.getTabData(this.navId,id)
            },
            //关注作者
            addfollow(id){
                console.log(id);
                let index = this.follows.findIndex(item=>item.id==id)
                this.isfollow=!this.isfollow
                if (this.isfollow) {
                    if (index==-1) {
                        this.follows.push({
                            id,
                            imageid:this.authorList.imageid,
                            profile:this.authorList.profile,
                            star:this.authorList.star,
                            name:this.authorList.title
                        })
                    }
                }else{
                    this.follows.splice(index,1)
                }
                window.localStorage.setItem("follows",JSON.stringify(this.follows))

            }
        },
        created() {
            this.authorId = this.$route.query.id
            let TabIndex = window.localStorage.getItem("TabIndex")
            this.navId = TabIndex==null?2:TabIndex
            this.getAuthorData(this.$route.query.id)
            this.getTabData(this.navId,this.$route.query.id)
        },
        watch:{
            'keyword':function () {
                 if(this.keyTime !== null){
                clearTimeout(this.keyTime);
                }
                this.keyTime = setTimeout(() => {
                    this.caipuList = this.caipuList.filter(item=>item.name.includes(this.keyword))
                },500)
                if (this.keyword=='') {
                    console.log(this.checked);
                    if (this.checked == '001') {
                        this.getRecipeListFun(this.$route.query.id,1,this.RecipeListTotal)
                    }else if(this.checked == '002'){
                        this.getVideoRecipeListFun(this.$route.query.id,1,this.RecipeListTotal)
                    }
                }
            },
            checked(){
                this.caipuFlag = false
                this.emptyFlag = true
                if (this.checked == "001") {
                  this.flag = true
                }else if(this.checked == "002"){
                  this.flag = false
                }
            },
            authorId(oldvalue,value){
                // console.log(oldvalue,value);
                if (value!=null) {
                  this.emptyFlag = true
                  this.loading = true
                  this.caipuFlag = false
                  this.albumFlag = false
                  this.SimpleTalkFlag = false
                  this.articleFlag = false
                  this.getAuthorData(value)
                  this.getTabData(this.navId,value)
                }
            }
        },
        components:{
            DRecipeList,
            AlbumList,
            SimpleTalkList,
            AuthorFans,
            ArticleList,
        },
        beforeDestroy() {
          clearTimeout(this.keyTime)
          window.localStorage.removeItem("TabIndex")  
        },
    }
</script>

<style lang="less" scoped>
.author-page{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #f2f2f2;

    .header{
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        .left{
            margin-left: 15px;
            &>img{
                width: 13px;
                height: 23px;
            }
        }
        .right{
            margin-right: 20px;
            display: flex;
            align-items: center;
            .n{
                font-size: 13px;
                font-weight: bold;
            }
            .msg{
                display: flex;
                align-items: center;
                padding: 5px 10px;
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: 6px;
                margin: 0 10px;
                &>img{
                    width: 18px;
                    height: 15px;
                    margin-right: 5px;
                }
            }
            .gz{
                display: flex;
                align-items: center;
                padding: 5px 10px;
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: 6px;
                &>img{
                    width: 16px;
                    height: 16px;
                    margin-right: 5px;
                }
            }
            .isfollow{
                opacity: 0.8;
                color: #f2f2f2;
            }
        }
    }
    .author-info{
        padding: 50px 15px 40px 15px;
        padding-top: 50px;
        background-image: linear-gradient(100deg,#fed74c,#feb74b);

       .main-info{
            display: flex;
            justify-content: space-between;
            .info-left{
            flex: 30%;
            .author-name{
                font-size: 20px;
                font-weight: bold;
                margin: 15px 5px;
                letter-spacing: 0.8px;
            }
            .Speciality{
                font-size: 12px;
                font-weight: bold;
                margin: 20px 0 10px 5px;
            }
        }
        .info-right{
            // width: 140px;
            text-align: right;
            margin-top: 10px;

            .fz-num,
            .gz-num{
                display: inline-block;
                text-align: center;
                padding: 0 20px;
            }
            .line{
                display: inline-block;
                width: 1px;
                height: 45px;
                background-color: #000;
                position: relative;
                top: 5px;
            }
            .num{
                margin-bottom: 10px;
                font-weight: bold;
                font-size: 15px;
            }
            .title{
                font-weight: bold;
                font-size: 13px;
            }
            .fz-num{
                padding-right: 10px;
            }
        }
       }
       .other-info{
        padding-top: 5px;
        .txt {
            margin-left: 5px;
            font-size: 13px;
            font-weight: bold;
            line-height: 22px;
        }
        .author-lists{
            margin-top: 20px;
            display: flex;
            align-items: center;
            .sex{
                margin: 0 10px;
                &>img{
                    width: 18px;
                    height: 18px;
                }
            }
            .level{
                margin: 0 2px;
                padding:2px 8px;
                background-color: rgba(255, 255, 255, 0.4);
                font-size: 13px;
                border-radius: 8px;
                font-style:initial;
            }
            .vip{
                margin: 0 10px;
                &>img{
                    width: 18px;
                    height: 18px;
                }
            }
        }
       }
    }
    .content{
        position: relative;
        // height: 170px;
        z-index: 50;
        .bg{
            position: relative;
            top: -35px;
            left: 1px;
            width: 100%;
            height: 60px;
            background-color: #fff;
            transform-origin: center;
            transform: rotateZ(177deg);
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            overflow: hidden;
        }
        .info-lists{
            position: absolute;
            top: -18px;
            width: 100%;
            background-color: #fff;
             .author-img{
            position: absolute;
            top: -50px;
            right: 11%;
            width: 65px;
            height: 65px;
            overflow: hidden;
            border-radius: 50%;
            &>img{
                width: 65px;
                height: 65px;
            }
             }
             .list{
            padding:40px 0 20px 0;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: space-evenly;

            .item{
                position: relative;
                padding:0 15px;
                text-align: center;
                line-height: 20px;
                &>h4{
                    color: #b3b3b3;
                    font-weight: bold;
                    font-size: 14px;
                }
            }
            .active{         
                &>h4{
                    color: #fed74c;

                }
                &::after{
                    content: '';
                    width: 16px;
                    height: 2px;
                    background-color: #fed74c;
                    position: absolute;
                    bottom: -5px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
            }
             }
             .checked-box{
                display: flex;
                margin-left: 30px;
                
                .box2,
                .box1{
                    font-size: 12px;
                    padding: 6px 8px;
                    border-radius: 12px;
                    margin-right: 13px;
                    background-color: #f6f8f7;
                }
                .activebox{
                    color: #feb74b;
                    font-weight: bold;
                    background-color: #fef5ea;
                }
             }
        }
        .lists-search{
            width: 100%;
            display: flex;
            padding-top: 20px;
            padding-bottom: 10px;
            align-items: center;
            justify-content: center;
            .main-search{
                width: 82%;
                padding:8px 0 8px 15px;
                display: flex;
                align-items: center;
                background-color: #f2f2f2;
                border-radius: 12px;
                &>img{
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                }
                &>input{
                    width: 100%;
                    outline: none;
                    border: none;
                    background-color: transparent;
                    font-size: 14px;
                }
            }
        }
    }
    .content-lists{
            width: 100%;
            background-color: #f2f2f2;

            .alllist{
                padding: 15px 25px;

                .lists-item{
                    width: 100%;
                    background-color: #fff;
                    border-radius: 8px;
                    margin-bottom: 20px;
                    .img{
                        width: 100%;
                        height: 160px;
                        border-top-left-radius: 8px;
                        border-top-right-radius: 8px;
                        overflow: hidden;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: cover;
                        
                    }
                    .img-txt{
                        padding: 15px;
                        &>h2{
                            font-size: 18px;
                            font-weight: bold;
                            padding-bottom: 15px;
                        }
                        &>h4{
                            font-size: 16px;
                            
                        }
                    }
                }
            }
    }
    .empty{
        padding-top: 122px;
    }
    .loading{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;

    .loadingImg{
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 5px #ccc;
        display: flex;
        align-items: center;
        justify-content: center;

      &>img{
        width: 22px;
        height: 22px;
        display: block;
      }
    }
  }
}
</style>